<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <title>登录</title>
    <link rel="stylesheet" href="main/css/login/base.css">
    <link rel="stylesheet" href="main/css/login/style.css">
    <style>
        body{
            height:auto;
            background:url(main/img/background1.png) no-repeat center fixed;
            -webkit-background-size:cover;
            -moz-background-size:cover;
            -o-background-size:cover;
            background-size:cover;
            /* color:rgba(255,255,255,.95) */
        }
        /* 设置填充表单背景色 */
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px white inset !important;
        }

        .login_panl{
            width: 474px;
            height: 428px;
            background-image: url('main/img/login_bg.png');
        }

        .login_btn{
            background-repeat: no-repeat;
            background-image: url(main/img/btn_login.png);
            padding-top: 15px;
            height: 60px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }
        .login_btn {
            color: white;
            font-size: 18px;
            position: relative;
            left: 10px;
            top: 20PX;
        }
        /*大写锁定提醒*/
        .capital {
            display: none;
            color: rgb(255, 137, 54);
            position: relative;
            top: 20px;
        }
    </style>

    <script type="text/javascript">
        /* 检测输入框的大小写是否开启 */
        window.onload=function(){
            function isIE(){
                if(!!window.ActiveXObject || "ActiveXObject" in window){
                    return true;
                }
                else{
                    return false;
                }
            }
            (function(){
                var inputPWD=document.getElementById('password');
                var capital=false;
                var capitalTip={
                    elem:document.getElementById('capital'),
                    toggle:function(s){
                        var sy=this.elem.style;
                        var d=sy.display;
                        if(s){
                            sy.display = s;
                        }
                        else{
                            sy.display=d=='none'?'':'none';
                        }
                    }
                }
                var detectCapsLock=function(event){
                    if(capital){return};
                    var e = event||window.event;
                    var keyCode = e.keyCode||e.which;
                    var isShift = e.shiftKey ||(keyCode == 16 ) || false ;
                    if(((keyCode>=65&&keyCode<=90 )&&!isShift)||((keyCode>=97&&keyCode<=122 )&&isShift)){
                        capitalTip.toggle('block');
                        capital=true
                    }
                    else{
                        capitalTip.toggle('none');
                    }
                }
                if(!isIE()){
                    inputPWD.onkeypress=detectCapsLock;
                    inputPWD.onkeyup=function(event){
                        var e = event||window.event;
                        if(e.keyCode == 20 && capital){
                            capitalTip.toggle();
                            return false;
                        }
                    }
                }
            })()
        }
    </script>
</head>
<body id="login">
<!-- <div class="bg"></div> -->
<div class="container">
    <div style="margin-top: 150px;text-align: -webkit-center;">
        <div class="panel loginbox login_panl">
            <form method="post">
                <div class="text-center margin-big padding-big-top">
                    <img src="main/img/logo.png" style="width: 150px;">
                    <h2 style="font-weight: bold;padding: 15px;">永扬后台管理</h2>
                </div>
                <div class="panel-body" style="padding: 10px 80px 0px 80px;">
                    <div class="form-group">
                        <div class="field field-icon-right">
                            <input type="text" class="input input-big" placeholder="帐号" id="account" name="account">
                            <span class="icon uname margin-small"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="field field-icon-right">
                            <input type="password" class="input input-big" placeholder="密码" id="password" name="password">
                            <span class="icon pword margin-small"></span>
                        </div>
                        <div id="capital" class="capital">大写锁定已开启</div>
                    </div>
                    <div class="form-group" style="display:none;height: 50px" id="vtion">
                        <input type="text" class="input input-big" placeholder="验证码" id="verification" name="verification" style="width: 140px; float: left;" maxlength="6">
                        <canvas id="canvas" style="width: 160px;height:43px;float: left;"></canvas>
                    </div>
                    <div class="form-group" >
                        <div id="button" onclick="$.loginFu()" class="login_btn">登 录</div>
                    </div>
                    <div class="form-group">
                        <p class="text-muted text-center">
                            <a href="#" id="promptA"></a>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="main/js/jquery.min.js?v=2.1.4"></script>
<script src="main/js/bootstrap.min.js?v=3.3.6"></script>
<script src="main/js/plugins/validate/jquery.validate.min.js"></script>
<script src="main/common/js/aes.js" type="text/javascript"></script>
<script src="main/common/js/CommonUtils.js"></script>
<script>
    $(function() {
        var counts=0;
        //回车提交事件
        $("body").keydown(function() {
            if (event.keyCode == "13") {//keyCode=13是回车键
                $.loginFu();
            }
        });
        var showNum =[];
        draw(showNum);
        $("#canvas").on('click',function(){
            draw(showNum);
        });
        function draw(showNum){
            var canvas_width=$('#canvas').width();
            var canvas_height=$('#canvas').height();
            var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
            var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
            canvas.width = canvas_width;
            canvas.height = canvas_height;
            var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
            var aCode = sCode.split(",");
            var aLength = aCode.length;//获取到数组的长度
            for(var i=0;i<=5;i++){
                var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
                var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
                var txt = aCode[j];//得到随机的一个内容
                showNum[i] = txt.toLowerCase();
                var x = 10 + i * 20;//文字在canvas上的x坐标
                var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
                context.font = "bold 23px 微软雅黑";

                context.translate(x, y);
                context.rotate(deg);

                context.fillStyle = randomColor();
                context.fillText(txt, 0, 0);

                context.rotate(-deg);
                context.translate(-x, -y);
            }
            for (var i = 0; i <= 5; i++) { //验证码上显示线条
                context.strokeStyle = randomColor();
                context.beginPath();
                context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
                context.stroke();
            }
            for (var i = 0; i <= 30; i++) { //验证码上显示小点
                context.strokeStyle = randomColor();
                context.beginPath();
                var x = Math.random() * canvas_width;
                var y = Math.random() * canvas_height;
                context.moveTo(x, y);
                context.lineTo(x + 1, y + 1);
                context.stroke();
            }
            function randomColor() {//得到随机的颜色值
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
        }
        $.loginFu=function(){
            var ac = $("#verification").val()
            var acc = ac.toLowerCase(); //将大写转化为小写字母
            var abb = "";
            for(var i =0;i<showNum.length;i++){
                abb+=showNum[i];
            }
            if (!$("#account").val()) {
                $("#promptA").html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>帐号不能为空！');
                $("#promptA").css("color","red");
                return;
            }
            if (!$("#password").val()) {
                $("#promptA").html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>密码不能为空！');
                $("#promptA").css("color","red");
                return;
            }
            if(counts>=2){
                $("#vtion").show();
                if(counts>=3){
                    if (!$("#verification").val()) {
                        $("#promptA").html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>验证码不能为空！');
                        $("#promptA").css("color","red");
                        draw(showNum);
                        return;
                    }
                    if(acc != abb){
                        $("#promptA").html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>验证码错误!');
                        $("#promptA").css("color","red");
                        draw(showNum);
                        return;
                    }
                }
            }
            var data={};
            data.password=window.btoa($("#password").val());
            data.account=$("#account").val();
            data.loginType= 0;
            //登录
            $.ajax({url:'/init/user/login',
                data:CommonUtils.encapsulationData(data),
                type:'post',
                cache:false,
                async: false,
                dataType:'json',
                contentType: "application/json",
                success:function(result) {
                    if (result.result) {
                        //存储用户对象
                        if (window.sessionStorage) {
                            localStorage.setItem("userInfo", JSON.stringify(result.userVO));
                        }
                        //跳转页面
                        window.location.href="main/index.html";
                    }else{
                        $("#promptA").html(result.msg);
                        $("#promptA").css("color","red");
                        counts++;
                    }
                },
                error : function() {
                    $("#promptA").html("系统出现异常，请联系管理员！");
                    $("#promptA").css("color","red");
                }
            });
        }

    });
</script>
</html>